<template>
	<view class="container">
		<uni-section title="上传图片" type="circle" title-color="#4682B4" title-font-size="1.1rem">
			<template v-slot:right>
				<span @click="imgs=''" style="color: gray;letter-spacing: 1rpx;">修改图片</span>
			</template>
			<view class="uplod">
				<view class="imgs" v-if="imgs.length>0">
					<block v-for="img in imgs">
						<image :src="img" mode="aspectFit" class="img-item"></image>
					</block>
				</view>
				<uni-file-picker v-else limit="3" mode="grid" @select="selectFn" @delete="delFn" fileMediatype="image"
					ref="cover">
					<uni-icons type="cloud-upload" size="50" color="skyblue"></uni-icons>
				</uni-file-picker>

			</view>
		</uni-section>
		<uni-section title="内容" type="circle" title-color="#4682B4" title-font-size="1.1rem">
			<textarea v-model="contentTxt" auto-height placeholder="请输入动态内容" maxlength="200" class="content-item"
				placeholder-style="color:rgba(255,255,255,.4)"></textarea>
		</uni-section>
		<uni-section title="类别" type="circle" title-color="#4682B4" title-font-size="1.1rem">
			<view class="labels">
				<block v-for="(item,index) in labels">
					<view :class="labelIndex==index?'label-active':'label'" @click="labelIndex=index">
						{{item}}
					</view>
				</block>
			</view>
		</uni-section>
		<view class="btn">
			<button size="mini" class="btn-submit" @click="submit">{{id?'修改':'发布'}}</button>
		</view>

	</view>
</template>

<script>
	import {
		addData,
		acquireData,
		verify
	} from '../../../database/index.js'
	export default {
		async onLoad(e) {
			if ('id' in e) {
				this.id = e.id
				let datas = await acquireData('dynamic', {
					_id: this.id
				})
				this.imgs = datas[0].contentImg
				this.labelIndex = datas[0].label
				this.contentTxt = datas[0].contentTxt
			}

		},
		data() {
			return {
				id: '',
				labelIndex: -1,
				labels: ['运动笔记', '心情记录'],
				imgs: [],
				files: [],
				contentTxt: ''
			}
		},
		methods: {
			async delFn(e) {
				this.files.splice(e.index, 1)
			},
			async selectFn(e) {
				var filearr = e.tempFiles
				for (var i = 0; i < filearr.length; i++) {
					this.files.push({
						filePath: filearr[i].path,
						fileName: filearr[i].name
					})
				}
			},
			clear() {
				this.labelIndex = -1
				this.labels = ['运动记录', '心情记录']
				this.imgs = []
				this.files = []
				this.contentTxt = ''
				this.$refs.cover.clearFiles()
			},
			async submit() {
				if (!this.contentTxt) {
					this.$showMsg('动态内容不能为空')
					return
				}
				if (this.labelIndex == -1) {
					this.$showMsg('请选择动态类别')
					return
				}
				let pics = []
				if (this.files.length > 0) {
					for (let file of this.files) {
						let res = await uniCloud.uploadFile({
							cloudPath: 'dynamicImg/' + Math.ceil(Math.random() * 10000000) + file.fileName,
							filePath: file.filePath,
							cloudPathAsRealPath: true,
						})
						pics.push(res.fileID)
					}
				} else {
					pics = this.imgs
				}
				if (this.id) {
					let [isUpdate, msg] = await verify('dynamic', {
						_id: this.id
					}, {
						uploadTime: new Date().getTime(),
						publisher: this.$store.getters.getToken,
						contentTxt: this.contentTxt,
						contentImg: pics,
						label: this.labelIndex
					})
					this.$showMsg(msg)
				} else {
					let [isadd, msg] = await addData('dynamic', {
						uploadTime: new Date().getTime(),
						publisher: this.$store.getters.getToken,
						contentTxt: this.contentTxt,
						contentImg: pics,
						label: this.labelIndex
					})
					if (isadd) {
						this.$showMsg('发布成功')
					} else {
						this.$showMsg('发布失败')
					}
				}
				this.clear()
			}

		}
	}
</script>

<style lang="scss" scoped>
	@function color-generator() {
		@return rgb(random(255), random(255), random(255));
	}

	.imgs {
		display: flex;
		margin-top: 10rpx;
		padding: 10px;
		justify-content: space-around;

		.img-item {
			border: 1px solid #fff;
			width: 260rpx;
			margin-right: 20rpx;
			background-color: white;
			border-radius: 8rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	::v-deep {
		.uni-section {
			.file-picker__box {
				margin: 0 auto;
			}

			.uplod {
				text-align: center;

				image {
					width: 400rpx;
				}
			}

			.uni-section-header__decoration {
				background-color: rgba(70, 130, 180, 1);
			}

		}
	}

	.labels {
		display: flex;
		flex-direction: row;
		padding: 20rpx;


		.label {
			border-radius: 15rpx/5rpx;
			padding: 10rpx 20rpx;
			margin-right: 20rpx;
			background-color: $global_text;
		}

		.label-active {
			@extend .label;
			background-color: #4682B4;
			font-weight: 600;

		}
	}

	.content-item {
		padding: 20rpx;
	}

	textarea {
		color: white;
		border-radius: 5rpx;
		border: 1px solid rgba(176, 196, 222, .1);
		background-color: rgba(72, 61, 139, .8);
		margin: 0 auto;
		height: 100rpx;
		margin-bottom: 20rpx;
	}

	.btn {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;

		.btn-submit {
			color: white;
			background-color: rgba(72, 61, 139, 1);
			border: 0;
			letter-spacing: 2rpx;
			width: 250rpx;
		}
	}
</style>